window.addEventListener("load", function () {
  const lrc = `[00:00.00] 作词 : 薛之谦
  [00:01.00] 作曲 : 薛之谦/赵英俊
  [00:14.22]我算不算鲜艳
  [00:20.85]残枝深埋勿见
  [00:27.81]请用凡胎肉眼
  [00:35.13]笑我这半生放下的尊严
  [00:42.03]我算不算惊艳
  [00:48.69]惹来燃火满园
  [00:55.62]尝尽旁观冷眼
  [01:02.76]飞蛾你为何展翅来相见
  [01:08.61]你何苦站我前面当暴风来临之前
  [01:15.66]我愿被乱世拆解你不必随我捐献
  [01:22.50]是否要沾染邪念才可以兑换圣洁
  [01:29.52]我只剩一句抱歉你陪我对抗世界
  [01:37.18]你算不算遥远
  [01:44.28]仿佛在我身边
  [01:51.30]短发还是长辫
  [01:58.38]这次是错过还是会遇见
  [02:05.22]我算不算丢脸
  [02:12.18]犬鸡借我登天
  [02:19.08]每当焚林而猎
  [02:26.25]会化作闪电带着雨出现
  [02:32.13]你何苦站我前面当万箭来临之前
  [02:39.06]就让我灰飞烟灭你不必随我捐献
  [02:45.96]是否要真有邪念才可以同病相怜
  [02:53.01]我只剩一句抱歉你陪我对抗世界
  [03:15.87]我算不算鲜艳
  [03:19.35]我算不算丢脸
  [03:22.77]我算不算卖点
  [03:27.81]你何苦站我前面任凭他山崩地裂
  [03:34.74]我本就来自深渊你不必随我捐献
  [03:41.67]我怎么会有善念也制服不了歹念
  [03:48.69]你没有一句怨言就陪我对抗世界
  [03:55.62]那快点赐我邪念像妖怪换张人脸
  [04:02.49]先学会贪得无厌再标榜一缕思念
  [04:09.57]当我快放弃信念你乱我心魔一面
  [04:16.50]化身成茫茫白雪指引我走出黑夜
  [04:25.23]看万兽锣鼓喧天看百鬼争奇斗艳
  [04:32.16]并不是蒙住双眼幸福会平均出现
  [04:39.09]我还是那个少年不曾被世界催眠
  [04:42.31] 制作人：宋涛
  [04:45.53] 编曲：宋涛
  [04:48.75] 配唱制作人：关皓译/宋涛
  [04:51.98] 吉他&贝斯：宋睿
  [04:55.20] 鼓：贝贝（武勇恒）@55tec Studio
  [04:58.42] 和音：关皓译/薛之谦
  [05:01.65] 人声录音：朱忠强@V-Studio Shanghai
  [05:04.87] 混音工程师：李军
  [05:08.09] 母带工程师：全相彦`;

  let audio = document.querySelector(".audio");
  let word = document.querySelector(".lrc");

  /**
   * 格式化字符串时间
   * @param {string} timeStr
   * @returns 返回时间
   */

  function parseTime(timeStr) {
    const parts = timeStr.split(":");
    return +parts[0] * 60 + +parts[1]; // +一元运算符转数字
  }

  //分离歌词
  let lrcArr = lrc.split("\n");
  let lrcObjArr = [];
  //截取时间和歌词
  lrcArr.forEach((item) => {
    item = item.trim();
    let time = item.slice(1, 9);
    time = parseTime(time);
    let words = item.slice(10).trim();
    lrcObjArr.push({
      time: time,
      words: words,
    });
  });

  function renderLrc() {
    let flag = document.createDocumentFragment();
    for (let i = 0; i < lrcObjArr.length; i++) {
      let li = document.createElement("li");
      li.textContent = lrcObjArr[i].words;
      flag.appendChild(li);
    }
    document.querySelector(".lrc-box ul").appendChild(flag);
  }

  renderLrc();

  let wordsHeight =
    document.querySelector(".lrc-box ul").children[0].clientHeight;

  function transformLrc(index) {
    document.querySelector(".lrc-box ul").style.transform = `translateY(-${
      wordsHeight * index
    }px)`;
  }
  audio.addEventListener("timeupdate", function () {
    for (let i = 0; i < lrcObjArr.length; i++) {
      if (audio.currentTime < lrcObjArr[i].time) {
        transformLrc(i - 1);

        break;
      } else {
        continue;
      }
    }
  });

  document.querySelector("#nav2").addEventListener("click", () => {
    window.scrollTo({
      top: document.querySelector(".opus-block").getBoundingClientRect().top,
      behavior: "smooth",
    });
  });
  document.querySelector("#nav4").addEventListener("click", () => {
    window.scrollTo({
      top: document.querySelector(".practices-block").getBoundingClientRect().top,
      behavior: "smooth",
    });
  });
  document.querySelector("#nav1").addEventListener("click", () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  });
});
